<template>
  <div>
    welcome
    {{ $store.state.menu }}

    <div>
      <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        :limit="1"
        :http-request="handleUploadOk"
      >
        <el-button type="primary">Click to upload</el-button>
        <template #tip>
          <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
        </template>
      </el-upload>

      <a-form>
        <a-form-item label="身份证号码">
          <a-input v-model:value="idnum" placeholder="请填写身份证号码" />
        </a-form-item>
        <a-form-item label="真实姓名">
          <a-input v-model:value="realname" placeholder="请填写真实姓名" />
        </a-form-item>
        <a-form-item label="银行卡号">
          <a-input v-model:value="bankNo" placeholder="请填写银行卡号" />
        </a-form-item>
      </a-form>
      <button @click="check">开始校验结果</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { put, getFileNameUUID } from '@/utils/alioss';

const idnum = ref('');
const realname = ref('');
const fileList = ref([]);
const bankNo = ref('');
const verifyId = async (url) => {
  // axios
  //   .post(
  //     'http://ai-market-ocr-person-id.icredit.link/ai_market/ai_ocr_universal/shen_fen_zheng/ch/v1',
  //     {
  //       IMAGE: url,
  //       IMAGE_TYPE: '1',
  //     },
  //     {
  //       headers: {
  //         Authorization: 'APPCODE 092a111065d6469982db25134a0520f7',
  //         'Content-Type': 'application/x-www-form-urlencoded',
  //       },
  //     },
  //   )
  //   .then((response) => {
  //     console.log('身份证验证的结果是', response);
  //   });
  const res = await axios.post('http://127.0.0.1:3030/verify', { url });
  console.log('身份证验证的结果是', res);
  const { 身份证识别实体信息 } = res.data;
  const { 身份证号, 姓名 } = 身份证识别实体信息.身份证人像面实体信息;
  idnum.value = 身份证号;
  realname.value = 姓名;
};
const handleUploadOk = async (option) => {
  console.log('点击上传要得到的内容', option);
  // 我们无论是使用什么ui框架 上传的流程当中只要能获取到 文件的file对象就可以完成自定义的上传
  // 生成的文件名称
  // 电竞平台.png => split => [电竞平台, png] => pop => png
  const objName = [getFileNameUUID(), option.file.name.split('.').pop()].join('.');

  // 调用 ali-oss 中的方法  put(文件名, 文件对象)
  const res = await put(`${objName}`, option.file);
  console.log('上传的结果', res);
  verifyId(`http://static.qf2208henduoqian.vip/${objName}`);
  // 对于elemetui或者是plus 自定义上传成功之后需要正确的填充上传的结果到 fileList
  // 这里需要手动的通过 Promise.resolve来返回请求的结果 这个结果会自动的加载到
  return Promise.resolve({
    name: objName,
    url: `http://static.qf2208henduoqian.vip/${objName}`,
  });
};

const check = async () => {
  const res = await axios.post('http://127.0.0.1:3030/verifyBank', {
    name: realname.value,
    idcard: idnum.value,
    bankcard: bankNo.value,
  });
  console.log('校验的结果是', res);
};
</script>
